<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:th="http://www.thymeleaf.org">
<head th:include="_header_include::frag(~{::title},~{},~{::style})">
    <title>添加角色</title>
    <style>
        .role-table {
            border: 1px solid #e0e0e0;
            border-bottom: none;
            padding: 0;
            position: relative;
            background: #efefef;
        }
        .role-table ul{background:#fff;}
        .header {
            height: 50px;
            line-height: 50px;
            border-bottom: 1px solid #e7e7e7;
            background: #F8F8F9;
            text-align: center;
            font-size: 16px;
        }

        .vertical-line {
            width: 1px;
            height: 100%;
            background: #ddd;
            position: absolute;
            left: 30%;
            top: 0;
            z-index: 1;
        }
        .vertical-line1 {
            width: 1px;
            height: 100%;
            background: #ddd;
            position: absolute;
            left: 80%;
            top: 0;
            z-index: 1;
        }

        .left {
            width: 28%;
            float: left;
            user-select: none;
            cursor: pointer;
            padding:20px 0;
            padding-left: 2%;
        }
        .left .el-checkbox__input{
            float: left;
            margin-top: 3px;
        }
        .left .el-checkbox__label{
            word-wrap: break-word;
            word-break: break-all;
            white-space: pre-wrap !important;
            width: 90%;
        }
        .header .left{padding:0;width: 30%;}
        .one {
            padding-left: 20px;
        }

        .right {
            width: 48%;
            float: left;
            padding:20px 0;
            padding-left: 2%;
        }
        .header .right{padding:0;width: 50%;}
        .handle{
            width: 20%;
            float: left;
            text-align: center;
            margin-top: 15px;
        }
        .header .handle{margin: 0;}
        .item-icon {
            margin-left: -5px;
            padding: 5px;
        }

        .line {
            clear: both;
            width: 100%;
            height: 1px;
            background: #e0e0e0;
        }
        [v-cloak] {
            display: none;
        }
        .checkAllBtn .el-checkbox__inner{margin-top: 15px;}
        .firstCheckAllBtn{position: absolute;left: 10px;top: 20px; }
    </style>
</head>
<body>
<div id="addRole" class="mainPadding" style="display: none;">  
    <el-breadcrumb separator="/" class="elBreadcrumb marginB20">
        <el-breadcrumb-item>Home</el-breadcrumb-item>
        <el-breadcrumb-item>系统管理</el-breadcrumb-item>
        <el-breadcrumb-item>角色管理</el-breadcrumb-item>
    </el-breadcrumb>
    <el-row class="mainWhiteBg">
        <div class="inforTitle">添加角色</div>
        <el-form :model="addRoleValidateForm" :rules="rules" ref="addRoleValidateForm" label-width="100px" class="demo-ruleForm mainWhitePadding">
            <el-form-item
                label="角色名称："
                prop="roleName"
                style="width:400px;">
                <el-input v-model="addRoleValidateForm.roleName"  maxlength="30" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item
                label="角色编码："
                prop="roleCode"
                style="width:400px;">
                <el-input v-model="addRoleValidateForm.roleCode"  maxlength="30" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="访问IP限制：">
                <el-radio-group v-model="addRoleValidateForm.visitLimitRadio" @change="visitLimitRadioChange">
                    <el-radio label="0">开放访问</el-radio>
                    <el-radio label="1">限制IP访问</el-radio>
                </el-radio-group>
                <el-button type="primary" size="medium" class="marginL20" @click="openIpPackDilog" v-show="isDisabled">选择访问IP包</el-button>
                <!-- <el-button type="primary" size="medium" class="marginL20" @click="dialogFormSetting = true">设置</el-button> -->
            </el-form-item>
            <el-row v-show="isDisabled">
            	<div class="fs16 marginB20" v-show="isDisabled"><div class="titleBorderL">已选访问IP包</div></div>
            </el-row>
            <el-row v-show="isDisabled">
                <el-table 
                    style="width: 100%"
                    border
                    :data="ipListTable" 
                    >
                    <el-table-column align="center" prop="id"  type="index" label="序号" width="55"></el-table-column>
                    <el-table-column align="center" prop="name" label="IP包名"></el-table-column>
                    <el-table-column align="center" prop="ipAddress" label="IP地址"></el-table-column>
                    <el-table-column align="center" label="操作">
                        <template slot-scope="scope">
                            <el-button
                                @click.native.prevent="deleteRow(scope.$index, ipListTable)"
                                type="text">
                                                                                            删除
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-row>
            <div class="fs16 marginB20 paddingT20">设定每个模块的权限</div>
           
            <!-- 树形表格 -->
            <ul class="role-table col-xs-offset-2 col-md-offset-1 col-sm-offset-2 marginB20">
                <li class="header">
                    <div class="left checkAllBtn"><el-checkbox v-model="checkAll1" @change="handleCheckAllChange1">全选</el-checkbox>&nbsp;&nbsp;&nbsp;&nbsp;模块菜单</div>
                    <div class="right">操作权限</div>
                    <div class="handle">数据权限</div>
                </li>
                <div class="vertical-line"></div>
                <div class="vertical-line1"></div>
                <li  v-for="(item,index) in dataList" :key="item.id" style="position: relative;">
                    <div class="left"  @click="fold(item)">
                        <i :class="{'el-icon-caret-right':item.folded,'el-icon-caret-bottom':!item.folded}" v-cloak v-if="item.subList" class="item-icon"></i>   
                        <el-checkbox @change="handleOneCheckAll(item)" v-cloak v-if="!item.subList" :indeterminate="item.isIndeterminate" v-model="item.checkAll">{{item.title}}</el-checkbox>
                        <span v-if="item.subList" v-cloak>{{item.name}}</span> 
                    </div>              
                    <div class="right">
                        <el-checkbox v-if="item.subList" :indeterminate="item.isIndeterminate" @change="checkSecondAll(item)" v-model="item.firstCheckAll" class="firstCheckAllBtn"></el-checkbox>                 
                        <el-checkbox-group v-model="item.checkedCities" @change="handleOneCheckedCitiesChange(item)" v-else>
                            <el-checkbox  v-for="m in item.operationInfos" :label="m.id" :key="m.id" v-cloak>{{m.name}}</el-checkbox>
                        </el-checkbox-group>
                    </div>
                    <div class="line"></div>
                    <ul v-show="item.subList&&!item.folded">
                        <li v-for="(subList,cur) in item.subList" :key="subList.id">
                            <div class="left">
                                <!-- <el-checkbox   v-model="subList.checkAll" @change="handleCheckAllChange($event,item,subList)" v-cloak>{{subList.name}}</el-checkbox> -->
                                <el-checkbox   v-model="subList.checkAll" @change="handleCheckAllChange(item,subList)" v-cloak>{{subList.name}}</el-checkbox>
                            </div>
                            <div class="right">
                                <el-checkbox-group v-model="subList.checkedCities" @change="handleCheckedCitiesChange(item,subList)">
                                    <el-checkbox v-for="p in subList.operationInfos" :label="p.id" :key="p.id" v-cloak >{{p.name}}</el-checkbox>
                                </el-checkbox-group>
                            </div>
                            <div class="handle">
                                <el-button type="primary" size="small" class="marginL20" @click="dialogFormSetting=true;openDialogLimitData(subList.authCode,subList.id)">设置</el-button>
                            </div> 
                            <div class="line"></div>                        
                        </li>
                    </ul>
                </li>
            </ul>
            <el-form-item style="text-align: center;">
                <el-button type="primary" :disabled="btnDisabled" @click="submitFormRole('addRoleValidateForm')">提交</el-button>
                <el-button  @click="reBackRoleInfo" >取消</el-button>
            </el-form-item>
        </el-form>
    </el-row>
    <!-- dialog -->
    <el-dialog title="选择IP包" :visible.sync="dialogFormChooseIP" @opened="queryIpPackgeData">
        <el-form :model="chooseIpform" :rules="rulesChooseIp" ref="chooseIpform">
            <el-row class="marginB10 greybg padding20">
                <el-row :gutter="20">
                    <el-col :span="6">
                   <el-form-item prop="ipPackageName">
                        <el-input v-model="chooseIpform.ipPackageName" placeholder="输入IP包名查询"></el-input>
                     </el-form-item>
                    </el-col>
                    <el-col :span="6">
                     <el-form-item prop="searchHasIp">
                         <el-input v-model="chooseIpform.searchHasIp" placeholder="输入包含IP查询"></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="2">
                        <el-button type="primary" size="medium"  @click="queryIpPackgeData" icon="el-icon-search">搜索</el-button>
                    </el-col>
                </el-row>
            </el-row>
            <el-table 
                tooltip-effect="dark"
                style="width: 100%"
                border
                :data="dataTableIP"
                @selection-change="changeIpTableFun"
                class="marginB10">
                <el-table-column align="center" v-model="chooseIpform.type" prop="id"  @selection-change="changeIpTableFun" type="selection" width="55"></el-table-column>
                <el-table-column align="center" prop="name" label="IP包名" width="155"></el-table-column>
                <el-table-column align="center" prop="ipAddress" label="IP地址"></el-table-column>
            </el-table>
            <el-form-item class="f-tac">
                <el-button type="primary" @click="submitIpPackeageForm('chooseIpform')">提交</el-button>
                <el-button @click="dialogFormChooseIP = false">取消</el-button>
            </el-form-item>
        </el-form>        
    </el-dialog>

    <el-dialog title="选择数据权限" :visible.sync="dialogFormSetting">
        <el-form :model="chooseLimitform" ref="chooseLimitform">
            <el-row class="marginB20">
                <el-checkbox-group v-model="chooseLimitCheck">
                    <el-checkbox v-for="field in fields"  :label="field.id" :key="field.id" style="margin-left: 0;margin-right: 10px;margin-bottom: 10px;">{{field.fieldName}}</el-checkbox>
                </el-checkbox-group>
            </el-row>            
            <el-form-item class="f-tac">
                <el-button type="primary" @click="submitFormField('chooseLimitform')">提交</el-button>
                <el-button @click="dialogFormSetting = false">取消</el-button>
            </el-form-item>
        </el-form>        
    </el-dialog>
</div>
</body>
<div th:include="_footer_include :: #jsLib"></div>
<script th:inline="javascript" >
var moduleData=[[${moduleData}]];
   var  addRoleVM=new Vue({
         el: '#addRole',
         data: function() {
            return {
                btnDisabled: false,
                isDisabled: false,
                chooseLimitCheck: [],//默认选中
                fields: [],
                checkAll1:false,//全选默认
                dataList:moduleData,
                addRoleValidateForm: {
                    roleName: '',
                    visitLimitRadio:'0',
                    roleName:''
                },
                rules:{
                    roleName:[{ required: true, message: '角色名称不能为空'},
                     {validator:function(rule,value,callback){
                                var param = {'roleName':value};
                                   axios.post('/role/roleManager/qeuryRoleByName',param)
                                   .then(function (response) {
                                       var data =  response.data;
                                       if(data.code=='0'){
                                           var resData = data.data;
                                           if(resData.length>0){
                                               callback(new Error("此角色名称已存在，请修改后提交"));
                                           }else{
                                               callback();
                                           }
                                           
                                       }else{
                                            callback(new Error("查询角色名称是否唯一报错"));
                                       }
                                   })
                                   .catch(function (error) {
                                     console.log(error);
                                   })
                                   .then(function () {
                                     // always executed
                                   });
                              
                          },trigger:'blur'}],
                      roleCode:[{ required: true, message: '角色编码不能为空'},
                      {validator:function(rule,value,callback){
                                    var param = {'roleCode':value};
                                     axios.post('/role/roleManager/qeuryRoleByName',param)
                                     .then(function (response) {
                                         var data =  response.data;
                                         if(data.code=='0'){
                                             var resData = data.data;
                                             if(resData.length>0){
                                                 callback(new Error("此角色编码已存在，请修改后提交"));
                                             }else{
                                                 callback();
                                             }
                                             
                                         }else{
                                              callback(new Error("查询角色编码是否唯一报错"));
                                         }
                                     })
                                     .catch(function (error) {
                                       console.log(error);
                                     })
                                     .then(function () {
                                       // always executed
                                     });
                                  
                              },trigger:'blur'}]
                },
                chooseIpform: {
                    ipPackageName: '',
                    searchHasIp:'',
                    type:[]
                },
                rulesChooseIp:{
                    type:[{ type: 'array', required: true, message: '请至少选择一个IP包', trigger: 'change' }]
                },
                chooseLimitform:{},
                searchInput:'',
                ipListTable: [],
                dataTableIP: [],
                multipleSelection: [],
                dialogFormChooseIP: false,
                dialogFormSetting: false,
                feildMenuId:'',
                checkBoxFieldArr:{},
                formLabelWidth: '120px',
                currentPage: 1,//默认第一页,
                multipleIpSelection:[],
                feildMenuId:'',
            }             
        },
        methods: {
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        alert('submit!');
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            openIpPackDilog(){
                 addRoleVM.dialogFormChooseIP = true;
                 if (this.$refs['chooseIpform']) {
                    this.$refs['chooseIpform'].resetFields();
              }
            },
            reBackRoleInfo(){
                 window.location.href="/role/roleManager/initRoleInfo";     
            },
            submitFormRole(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        //处理角色对应操作项数据
                       var submitData=addRoleVM.dataList;
                       var  operationArry=[];
                       //设置操作权限菜单
                       var  menuArry=[];
                        if(null!=submitData){
                            //循环一级菜单
                          for(var i=0; i<submitData.length;i++)  {
                             var subList= submitData[i].subList;  
                             if(null!=subList){
                                 //循环二级菜单
                                  for(var j=0; j<subList.length;j++)  {
                                      var checkedCities= subList[j].checkedCities; 
                                      if(null!=checkedCities){
                                         //二级菜单Id
                                         menuArry.push(subList[j].id);
                                        //循环选中操作
                                        for(var m=0; m<checkedCities.length;m++)  {
                                            var operation={};
                                             operation.id=checkedCities[m];
                                             operationArry.push(operation);  
                                         }
                                       }
                                   }
                                 }   
                             }
                         }
                        //获取菜单的数据列
                        var  fieldMap=addRoleVM.checkBoxFieldArr;
                         //处理角色对应的Ip包数据
                         var  param={};
                         param.roleName=addRoleVM.addRoleValidateForm.roleName;
                         param.roleCode= addRoleVM.addRoleValidateForm.roleCode;
                         param.isIpLimit=addRoleVM.addRoleValidateForm.visitLimitRadio;
                         param.operations=operationArry;
                         param.ipPackages=addRoleVM.ipListTable;
                         param.menuIds=menuArry;
                         param.menuFileds=fieldMap;
                         addRoleVM.btnDisabled = true;  
                         axios.post('/role/roleManager/saveRoleInfo',param).then(function (response) {
                                   if(null==response){
                                        addRoleVM.$message({
                                            message: "接口调用失败",
                                            type: 'error'
                                          }); 
                                          addRoleVM.btnDisabled = false;  
                                         return ;
                                    }
                                    var resobj= response.data;
                                    if(null==resobj){
                                        addRoleVM.$message({
                                            message: "接口调用失败",
                                            type: 'error'
                                          }); 
                                        addRoleVM.btnDisabled = false;  
                                        return ;
                                    } 
                                    if(resobj.code!='0'){
                                        addRoleVM.$message({
                                            message: "接口调用失败",
                                            type: 'error'
                                          }); 
                                        addRoleVM.btnDisabled = false;  
                                        return ;
                                    }
                                    addRoleVM.btnDisabled = false;  
                                    window.location.href="/role/roleManager/initRoleInfo"; 
                                    }).catch(function (error) {
                                      console.log(error);
                                      addRoleVM.btnDisabled = false;  
                                    }).then(function () {
                               });  
                         
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            
            resetForm(formName) {
                this.$refs[formName].resetFields();
            },
            handleClick(row) {
                console.log(row);
            },
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            queryIpPackgeData(){
             //查询Ip包数据
                var param={};
                var ipAddress = this.chooseIpform.searchHasIp;
                var ipPackageName = this.chooseIpform.ipPackageName;
                param.ipPackageName=ipPackageName;
                param.ipAddress=ipAddress;
                var ipListTable=addRoleVM.ipListTable;
                var deleId=[];
                if(null!=ipListTable&&ipListTable.length>0){
                for (var i=0;i<ipListTable.length;i++ ) {
                      deleId.push(ipListTable[i].id);  
                 }
                }
                param.deleId=deleId;
                axios.post('/ip/ipAccess/queryPackageList',param).then(function (response) {
                   if(null==response){
                        addRoleVM.$message({
                            message: "接口调用失败",
                            type: 'error'
                          }); 
                         return ;
                    }
                    var resobj= response.data;
                    if(null==resobj){
                        addRoleVM.$message({
                            message: "接口调用失败",
                            type: 'error'
                          }); 
                         return ;
                    } 
                    if(resobj.code!='0'){
                        addRoleVM.$message({
                            message: "接口调用失败",
                            type: 'error'
                          }); 
                        return ;
                    }
                     var pageData=resobj.data;
                     addRoleVM.dataTableIP =pageData.data; 
                    })
                    .catch(function (error) {
                      console.log(error);
                    })
                    .then(function () {
                    }); 
            },
            changeIpTableFun(val) {
                 this.multipleIpSelection = val;
             },
             submitIpPackeageForm(formName) {
              //选择IP包后提交数据
               this.$refs[formName].validate((valid) => {
                    if (valid) {
                     var ipSelectData=addRoleVM.multipleIpSelection; 
                     addRoleVM.ipListTable=addRoleVM.ipListTable.concat(ipSelectData);
                     addRoleVM.dialogFormChooseIP=false;
                   } else {
                     console.log('error submit!!');
                    return false;
                  }
               });
               },
                openDialogLimitData(moduleCode ,id){
                
                 var  param={};
                 param.menuCode=moduleCode;
                 addRoleVM.feildMenuId=id;
                 axios.post('/role/roleManager/queryCustomField',param).then(function (response) {
                       if(null==response){
                         
                        }
                        var resobj= response.data;
                        if(null==resobj){
                            addRoleVM.$message({
                                message: "接口调用失败",
                                type: 'error'
                              }); 
                            return ;
                        } 
                        if(resobj.code!='0'){
                            addRoleVM.$message({
                                message: "接口调用失败",
                                type: 'error'
                              }); 
                            return ;
                        }
                         addRoleVM.fields=resobj.data;
                          var  fieldAray= resobj.data;
                          var fArray=[];
                        //获取菜单是否已选择
                        var  fieldMap=addRoleVM.checkBoxFieldArr;
                        if(null!=fieldMap){
                         for(var key in fieldMap){
                            var value=fieldMap[key];
                            if(key==id&&value.length>0){
                            //如果做过选择选择上次选中数据
                              fArray=value; 
                              } 
                           } 
                          } 
                         if(fArray.length<1&&null!=fieldAray){
                         //默认全部选中
                             for(var i=0;i<fieldAray.length;i++){
                                fArray.push(fieldAray[i].id);
                              }
                          }
                          addRoleVM.chooseLimitCheck=fArray;
                        })
                        .catch(function (error) {
                          console.log(error);
                        })
                        .then(function () {
                        });  
                },
                //提交数据权限
                submitFormField(form){
                    //选择数据权限合并(菜单对应Map ,菜单Id,当前被选择的数据)
                    Vue.set(this.checkBoxFieldArr,addRoleVM.feildMenuId,addRoleVM.chooseLimitCheck);
                    addRoleVM.dialogFormSetting=false;  
                },
                //自动勾选自定义字段
                limitData(moduleCode ,id){
                    
                    var  param={};
                    param.menuCode=moduleCode;
                    axios.post('/role/roleManager/queryCustomField',param).then(function (response) {
                           var resobj= response.data;
                           if(null==resobj||resobj.code!='0'){
                               addRoleVM.$message({
                                   message: "接口调用失败",
                                   type: 'error'
                                 }); 
                               return ;
                           } 
                            addRoleVM.fields=resobj.data;
                             var  fieldAray= resobj.data;
                             var fArray=[];
                           //获取菜单是否已选择
                          
                            //默认全部选中
                              if(null!=fieldAray){
                                for(var i=0;i<fieldAray.length;i++){
                                   fArray.push(fieldAray[i].id);
                                 }
                              Vue.set(addRoleVM.checkBoxFieldArr,id,fArray);
                               }
                           })
                           .catch(function (error) {
                             console.log(error);
                           })
                           .then(function () {
                           });  
                   },
             // 删除
             deleteFun() {
                this.$confirm('删除后此角色信息将不存在，确认删除吗？', '消息提醒', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });          
                });
            },
            // 分页
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
            },
            deleteRow(index, rows) {
                rows.splice(index, 1);
            },
            fold: function (item) {
                if (typeof item.folded === "undefined") {
                    this.$set(item, "folded", true);
                } else {
                    item.folded = !item.folded;
                }
            },
            // 全选一项
            handleCheckAllChange(item, subList) {
                console.log(item)
                console.log(subList)
                var arr = [];
                for (var a = 0; a < subList.operationInfos.length; a++) {
                    arr.push(subList.operationInfos[a].id)
                }
                if (typeof subList.checkedCities === "undefined") {
                    this.$set(subList, "checkedCities", arr);
                }
                // subList.checkedCities = event.target.checked ? arr : [];
                subList.checkedCities = subList.checkAll ? arr : [];
                if (typeof subList.checkAll === "undefined") {
                    this.$set(subList, "checkAll", true);
                }
                var secondAllSelect = item.subList.every((item) => item.checkAll);
                if (secondAllSelect) {
                    item.firstCheckAll = true;
                } else {
                    item.firstCheckAll = false;
                }
                this.limitData(subList.authCode,subList.id);
                this.checkAllSelect();
            },
            // 单选
            handleCheckedCitiesChange(item, subList) {
                var checkedCount = subList.checkedCities.length;
                if (typeof subList.checkAll === "undefined") {
                    this.$set(subList, "checkAll", false);
                }
                subList.checkAll = checkedCount === subList.operationInfos.length;
                var secondAllSelect = item.subList.every((item) => item.checkAll);
                if (secondAllSelect) {
                    item.firstCheckAll = true;
                } else {
                    item.firstCheckAll = false;
                }
                this.checkAllSelect();
            },
            // 点击所有
            checkSecondAll: function (item) {
                if (typeof item.firstCheckAll === "undefined") {
                    this.$set(item, "firstCheckAll", true);
                }
                for (var a = 0; a < item.subList.length; a++) {
                    this.checkItemAll(item.firstCheckAll, item.subList[a])
                }
                // item.isIndeterminate=false
            },
            checkItemAll: function (flag, item) {
                var arr = [];
                for (var a = 0; a < item.operationInfos.length; a++) {
                    arr.push(item.operationInfos[a].id)
                }
                if (typeof item.checkedCities === "undefined") {
                    this.$set(item, "checkedCities", arr);
                }
                item.checkedCities = flag ? arr : [];
                item.checkAll = flag;
                this.limitData(item.authCode,item.id);
                this.checkAllSelect();
            },
            
            // 没有二级菜单
            handleOneCheckedCitiesChange:function (item) {
                var checkedCount = item.checkedCities.length;
                if (typeof item.checkAll === "undefined") {
                    this.$set(item, "checkAll", false);
                }
                item.checkAll = checkedCount === item.operationInfos.length;
                this.checkAllSelect();
            },
            handleOneCheckAll:function (item) {
                var arr = [];
                for (var a = 0; a < item.operationInfos.length; a++) {
                    arr.push(item.operationInfost[a].id)
                }

                item.checkedCities = item.checked ? arr : [];
                this.checkAllSelect();
            },
            visitLimitRadioChange(value) {
                if(value==1){
                    this.isDisabled=true
                }else{
                    this.isDisabled=false
                }
            },
            handleCheckAllChange1(val) {
                this.dataList.forEach((item) => {
                    if (item.subList) {
                        item.firstCheckAll = val;
                        this.checkSecondAll(item);
                        item.subList.forEach((innerItem) => {
                            innerItem.checkAll = val;
                        })
                    } else {
                        item.checkAll = val;
                        this.handleOneCheckAll(item);
                    }
                })
            },
            // 校验单选和多选关联
            checkAllSelect() {
                var flag = true;
                this.dataList.forEach((item) => {
                    if (!(item.firstCheckAll || item.checkAll)) {
                        flag = false;
                    }
                });
                this.checkAll1 = flag;
            }
        },
        mounted(){
            document.getElementById('addRole').style.display = 'block';
        }
    })
</script>
</html>